<template>
	<view class="app" :style="styleCom">
		<view class="header">
			<image :src="images.success" class="success-image"></image>
			<view class="success-title">支付成功</view>
			<view class="hr"></view>
		</view>
		<view class="info-box">
			<view class="info-amount" v-if="options.total_fee">¥ {{ (options.total_fee / 100).toFixed(2) }}</view>
			<view class="info-amount" v-else>¥ 0</view>
			<view class="left-circle"></view>
			<view class="right-circle"></view>
			<view class="info-main">
				<view class="info-cell">
					<view class="left">订单编号</view>
					<view class="right">{{ options.order_no || "-" }}</view>
				</view>
				<view class="info-cell" v-if="options.pay_date">
					<view class="left">付款时间</view>
					<view class="right">{{ timeFormat(options.pay_date,'yyyy-MM-dd hh:mm:ss') }}</view>
				</view>
			</view>
		</view>
		<!-- 广告位开始 -->
		<view class="uni-ad">
			<!-- 红包广告-->
			<!-- <ad-interactive v-if="options.adpid" :adpid="options.adpid" v-slot:default="{data, loading, error}" open-page-path="/uni_modules/uni-pay/pages/ad-interactive-webview/ad-interactive-webview" @error="onaderror">
				<view v-if="data" class="ad-interactive">
					<image :src="data.imgUrl" mode="widthFix"></image>
				</view>
			</ad-interactive> -->
			<!-- #ifndef MP-WEIXIN -->
			<!-- 注意：h5下的广告出来有延迟，后续要优化 -->
			<!-- <ad v-if="options.adpid" :adpid="options.adpid" type="banner" @error="onaderror"></ad> -->
			<!-- #endif -->
		</view>
		<!-- 广告位结束 -->
		<view v-if="options.return_url" class="button-query" @click="queryOrder">查看订单</view>
		<view class="footer-hr"></view>
	</view>
</template>

<script>
	import jsSdk from "../../js_sdk/js_sdk.js"
	export default {
		data() {
			return {
				options: {
					adpid: "",
					main_color: "",
					order_no: "",
					out_trade_no: "",
					total_fee: "",
					pay_date: "",
					return_url: ""
				},
				images: {
					success: ""
				},
				// 默认颜色
				color: {
					wxpay: "#01be6e",
					alipay: "#108ee9"
				}
			}
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			this.options = options;
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {},
		// 函数
		methods: {
			timeFormat: jsSdk.timeFormat,
			queryOrder() {
				let url = this.options.return_url + `?out_trade_no=${this.options.out_trade_no}&order_no=${this.options.order_no}`;
				if (url.indexOf("/") !== 0) url = `/${url}`;
				uni.navigateTo({
					url,
				});
			},
			onaderror(e) {
				console.log("ad-error", e);
			},
		},
		// 监听器
		watch: {
			"mainColorCom": {
				immediate: true,
				handler(newVal, oldVal) {
					// 动态改变导航栏颜色
					setTimeout(function() {
						uni.setNavigationBarColor({
							frontColor: "#ffffff",
							backgroundColor: newVal
						});
					}, 0);
				}
			}
		},
		// 计算属性
		computed: {
			mainColorCom() {
				let color = "";
				// #ifdef MP-ALIPAY
				color = this.options.main_color || this.color.alipay;
				// #endif
				// #ifndef MP-ALIPAY
				color = this.options.main_color || this.color.wxpay
				// #endif
				return color;
			},
			styleCom() {
				return `--main:${this.mainColorCom};`;
			}
		}
	}
</script>
<style lang="scss" scoped>
	.app {
		--bgcolor: #f3f3f3;

		background-color: var(--bgcolor);
		min-height: calc(100vh - var(--window-bottom) - var(--window-top));
	}

	.header {
		background-color: var(--main);
		text-align: center;
		color: #ffffff;
		padding: 40px 15px 25px 15px;

		.success-image {
			width: 60px;
			height: 60px;
		}

		.success-title {
			font-size: 17px;
			margin-top: 20px;
			font-weight: bold;
		}

		.hr {
			margin-top: 20px;
			width: 100%;
			height: 15px;
			border-radius: 10px;
			opacity: 0.1;
			background-color: #000000;
		}
	}

	.info-box {
		width: calc(100% - 50px);
		margin: 0 25px;
		position: relative;
		margin-top: -32px;
		background-color: #ffffff;

		.info-amount {
			height: 75px;
			line-height: 75px;
			text-align: center;
			color: var(--main);
			font-weight: bold;
			font-size: 30px;
			border-bottom: 2px dashed #f3f3f3;
		}

		.left-circle {
			background-color: var(--bgcolor);
			position: absolute;
			width: 20px;
			height: 20px;
			border-radius: 50%;
			top: calc(75px - 10px);
			left: -10px;
		}

		.right-circle {
			background-color: var(--bgcolor);
			position: absolute;
			width: 20px;
			height: 20px;
			border-radius: 50%;
			top: calc(75px - 10px);
			right: -10px;
		}

		.info-main {
			padding: 15px;
			font-size: 13px;
			color: #333333;

			.info-cell {
				/* #ifndef APP-NVUE */
				display: flex;
				/* #endif */
				line-height: 25px;

				.left {
					width: 100px;
					text-align: left;
				}

				.right {
					flex: 1;
					text-align: right;
				}
			}
		}
	}

	.uni-ad {
		margin-top: 25px;
		min-height: 50px;

		.ad-interactive {
			text-align: center;
		}
	}

	.button-query {
		background-color: var(--main);
		color: #ffffff;
		width: calc(100% - 60px);
		margin: 25px 30px 0 30px;
		padding: 10px 15px;
		border-radius: 25px;
		text-align: center;
		box-sizing: border-box;
		font-size: 16px;
	}

	.button-query:active {
		opacity: 0.7;
	}

	.footer-hr {
		height: 50px;
		display: block;
	}
</style>